<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" >
    <title>文都掌云</title>
    <link rel="stylesheet" href="index.css" >
</head>
<body>
<div class="my-container">
    <div class="my-avatar">
        <img src="login.png"/>
    </div>

    <div class="my-title">
        文都掌上办公
    </div>

    <form class="my-form">
        <div class="my-input">
            <input name="userid"/>
            <label>账号：</label>
        </div>
        <div class="my-input">
            <input name="pwd" type="password"/>
            <label>密码：</label>
        </div>
        <div class="my-input">
            <input name="code"/>
            <img src="yzm.png" class="my-yzm" />
            <label>验证码：</label>
        </div>

        <button type="button" class="my-button" onclick="login()">
            登 录
        </button>

    </form>

    <div class="my-bottom">
        大学里有颗树叫高数，很多人都挂在上面
    </div>

</div>

<script>

    let key;
    function  getYzm(){
        key = Math.ceil(Math.random()*999999999999);
        document.querySelector(".my-yzm").src="yzm?key="+key;
    }

    getYzm();

    async function login(){
        let userid = document.querySelector("input[name=userid]").value;
        let pwd = document.querySelector("input[name=pwd]").value;
        let code = document.querySelector("input[name=code]").value;

        let params = "userid="+userid+"&pwd="+pwd+"&code="+code+"&key="+key;

        await fetch('login',{
            method:"POST",
            headers:{
                "content-type":"application/x-www-form-urlencoded"
            },
            body:params
        });
    }
</script>


</body>
</html>